<template>
  <div>
    <!-- 顶部输入框 -->
    <div class="top-search-title">
      <!-- 城市按钮 -->
      <span class="city-btn" @click="cityGoto"
        >{{ cityName }}<van-icon name="play" class="vant-icon-plat"
      /></span>
      <van-search
        v-model="value"
        placeholder="请输入小区地址"
        class="input-serch"
      />
    </div>
    <!-- 地图标记 -->
    <van-icon name="location-o" class="Map-icon" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      cityName: '',
      value: '',
    }
  },
  methods: {
    cityGoto() {},
  },
}
</script>

<style scoped lang="less">
.top-search-title {
  position: absolute;
  top: 25px;
  left: 20px;
  width: 100%;
  height: 34px;
  padding: 0 5px;
  // background-color: rgba(0, 0, 0, 0);
  background-color: #fff;
  border-radius: 5px 5px;
  overflow: hidden;
  display: flex;
  align-content: center;
  width: 80%;
}
.input-serch {
  width: 188px;
  height: 34px;
  background-color: #fff !important;
  color: #9c9fa1;
}
.vant-img-swipe {
  width: 100%;
}
.city-btn {
  height: 20px;
  font-size: 14px;
  line-height: 20px;
  padding-right: 10px;
  background-color: #fff;
  // border-radius: 3px  0 0 3px;
  border-right: 1px solid #e5e5e5;
  margin-top: 8px;
}
.vant-icon-plat {
  transform: rotate(90deg);
  font-size: 14px;
}
.Map-icon {
  position: absolute;
  top: 30px;
  right: 10px;
  font-size: 20px;
  color: #fff;
  width: 25px;
  height: 25px;
}
</style>
